<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Leaflet 简单地图示例</title>
    <!-- Leaflet CSS -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
        integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
    <!-- Leaflet JS -->
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
        integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <style type="text/tailwindcss">
        @layer utilities {
            .map-height {
                height: calc(100vh - 4rem);
            }
            .control-btn {
                @apply bg-white p-2 rounded shadow-md hover:bg-gray-100 transition-colors duration-200 cursor-pointer;
            }
        }
    </style>
</head>

<body class="bg-gray-50">
    <!-- 页面头部 -->
    <header class="bg-white shadow-md py-3 px-4 md:px-6">
        <div class="container mx-auto flex justify-between items-center">
            <h1 class="text-xl md:text-2xl font-bold text-gray-800 flex items-center">
                <i class="fa fa-map-marker text-blue-500 mr-2"></i>
                Leaflet 地图示例
            </h1>
            <div class="flex space-x-2">
                <button id="zoomIn" class="control-btn">
                    <i class="fa fa-search-plus text-gray-700"></i>
                </button>
                <button id="zoomOut" class="control-btn">
                    <i class="fa fa-search-minus text-gray-700"></i>
                </button>
                <button id="addMarker" class="control-btn">
                    <i class="fa fa-plus-circle text-green-500"></i>
                </button>
                <button id="resetView" class="control-btn">
                    <i class="fa fa-home text-purple-500"></i>
                </button>
            </div>
        </div>
    </header>

    <!-- 地图容器 -->
    <div id="map" class="map-height w-full"></div>

    <!-- 底部信息 -->
    <footer class="bg-gray-800 text-white py-2 px-4 text-center text-sm">
        <p>© 2023 Leaflet 地图示例 | 点击地图可添加标记</p>
    </footer>

    <script>
        // 初始化地图
        const map = L.map('map').setView([34.19689866563631, 108.85611774247946], 13); // 北京坐标
        const TDT_IMG_W =
            'https://{s}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=' +
            '2cbfd71b478e0ebc98c4db3324877fe5'
        // 添加OpenStreetMap图层
        L.tileLayer(TDT_IMG_W, {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
            maxZoom: 19
        }).addTo(map);
    </script>
</body>

</html>